<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="GB18030">
<head>
    <meta charset="GB18030">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<%--引入公共css--%>
    <%@include file="/WEB-INF/pages/include/base_css.jsp"%>
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>
<%--引入公共登录成功状态栏--%>
<%@include file="/WEB-INF/pages/include/manager_loginbar.jsp"%>

<div class="container-fluid">
    <div class="row">
        <%--引入公共菜单栏--%>
        <%@include file="/WEB-INF/pages/include/manager_menu.jsp"%>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" action="${PATH}/admin/index" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <%--必须有name属性才能提交  value从地址栏中获取参数表单回显--%>
                                <input class="form-control has-success" type="text" name="condition" value="${param.condition}" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <%--批量删除管理员--%>
                    <button type="button" id="batchDeleteAdminBtn" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${PATH}/admin/add.html'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <div style="color:red;">${msg}</div>
                    <%--显示完msg即清除--%>
                    <%
                        session.removeAttribute("msg");
                    %>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>邮箱地址</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <c:if test="${not empty pageInfo.list}">
                                    <c:forEach items="${pageInfo.list}" var="item" varStatus="vs">
                                        <tr>
                                            <td>${vs.count}</td>
                                            <td><input type="checkbox" adminId="${item.id}"></td>
                                            <td>${item.loginacct}</td>
                                            <td>${item.username}</td>
                                            <td>${item.email}</td>
                                            <td>
                                                <%--跳转分配权限--%>
                                                <button type="button" onclick="window.location='${PATH}/admin/assignRole.html?id=${item.id}'" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                                                <%--修改管理员用户--%>
                                                <button type="button" onclick="window.location='${PATH}/admin/edit.html?id=${item.id}'" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                                                <%--删除单个管理员--%>
                                                <button type="button" adminId="${item.id}" class="btn btn-danger btn-xs deleteAdminBtn"><i class=" glyphicon glyphicon-remove"></i></button>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:if>
                            </tbody>
                            <tfoot>
                            <%--分页--%>
                            <tr >
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <%--1、判断是不是第一页--%>
                                        <c:choose>
                                            <c:when test="${pageInfo.isFirstPage}">
                                                <%--当前页是第一页,不可选--%>
                                                <li class="disabled"><a href="javaScript:void(0)">上一页</a></li>
                                            </c:when>
                                            <c:otherwise>
                                                <%--当前页不是第一页,可以点击--%>
                                                <li><a href="${PATH}/admin/index?pageNum=${pageInfo.pageNum-1}&condition=${param.condition}">上一页</a></li>
                                            </c:otherwise>
                                        </c:choose>
                                        <%--2、判断是不是中间页--%>
                                            <c:forEach items="${pageInfo.navigatepageNums}" var="index">
                                                <c:choose>
                                                    <c:when test="${pageInfo.pageNum == index}">
                                                        <%--当前页是中间页，不可以点击，高亮显示--%>
                                                        <li class="active"><a href="javaScript:void(0)">${index} <span class="sr-only">(current)</span></a></li>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <li><a href="${PATH}/admin/index?pageNum=${index}&condition=${param.condition}">${index}</a></li>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:forEach>
                                        <%--3、判断是不是最后一页--%>
                                            <c:choose>
                                                <c:when test="${pageInfo.isLastPage}">
                                                    <%--当前页是最后一页,不可选--%>
                                                    <li class="disabled"><a href="javaScript:void(0)">下一页</a></li>
                                                </c:when>
                                                <c:otherwise>
                                                    <%--当前页不是最后一页--%>
                                                    <li><a href="${PATH}/admin/index?pageNum=${pageInfo.pageNum+1}&condition=${param.condition}">下一页</a></li>
                                                </c:otherwise>
                                            </c:choose>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--引入公共js--%>
<%@include file="/WEB-INF/pages/include/base_js.jsp"%>
<script type="text/javascript">
    /*批量删除的全选效果*/
    //1.thead中的全选框的单击事件：点击时设置所有的tbody内的复选框状态和自己一致
    $("table thead :checkbox").click(function () {
        $("table tbody :checkbox").prop("checked",this.checked);
    });
    //2.tbody中的子复选框的单击事件：每个子复选框被点击时，都需要检查是否全都被选中
    $("table tbody :checkbox").click(function () {
       var totalCount = $("table tbody :checkbox").length;
       var checkedCount = $("table tbody :checkbox:checked").length;
       $("table thead :checkbox").prop("checked",totalCount == checkedCount);
    });
    /*批量删除管理员*/
    $("#batchDeleteAdminBtn").click(function () {
        //获取选中的tbody中的管理员id列表提交给后台删除
        var idsArr = new Array();//js的数组
        var $checkedInput = $("table tbody :checkbox:checked");
        //遍历集合，将每个input的管理员id获取到
        $checkedInput.each(function () {
            //jQuery的增强for循环，会自动对jQuery对象进行遍历，使用遍历的dom对象调用传入的函数
            //this表示正在遍历的dom对象
            var adminId = $(this).attr("adminId");
            //向数组中添加元素
            idsArr.push(adminId);
            //提交批量删除的请求
            layer.confirm("您真的要删除吗？",function () {
                //idsArr.join("*") 将数组中的元素每两个默认使用逗号连接成一个字符串 例如[1,2,3] => 1,2,3
                window.location = "${PATH}/admin/batchDeleteAdmin?ids="+idsArr.join();
            })
        })
    });
    /*删除单个管理员*/
    $(".deleteAdminBtn").click(function () {
        //获取要删除管理员的id，被点击按钮所在行的管理员id
        //this代表被删除的dom对象
        //.prop()表示获取标签的自带属性 .attr()表示获取标签的自定义属性
        var adminId = $(this).attr("adminId");
        var name = $(this).parents("tr").children("td:eq(2)").text();
        layer.confirm("您真的要删除"+name+"吗？",{icon:3},function() {
            window.location = "${PATH}/admin/delete/"+adminId;
        })
    });

    /*当前页面所在的菜单自动展开，模块标签高亮显示*/
    $(".list-group-item:contains('权限管理')").removeClass("tree-closed");
    $(".list-group-item:contains('权限管理') ul").show();
    $(".list-group-item:contains('权限管理') li :contains('用户维护')").css('color','red');

    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

</script>
</body>
</html>

